<template>
    <div class="qilin-homepage">
        <div class="qilin-homepage-header">
            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="item in imageList" :key="item.src">
                    <img :src="item.src" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="qilin-homepage-content qilin-py-2 qilin-px-2 flex-row">
            <div class="qilin-homepage-content-box" v-for="item in infoList" :key="item.title">
                <div class="qilin-homepage-content-box-header qilin-py-1 flex-row">
                    <el-icon class="el-icon-user"></el-icon>
                    <span>{{item.title}}</span>
                </div>
                <div class="qilin-homepage-content-box-list qilin-py-1 qilin-px-1">
                    <div class="qilin-homepage-content-box-list-item qilin-py-1 single-ellipsis flex-row"
                        v-for="item in 10" :key="item"
                    >
                        万里长城永不倒，千里黄河水滔滔！
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            imageList:[
                {
                    src:require("@/assets/images/image01.jpg")
                },
                {
                    src:require("@/assets/images/image02.jpg")
                },
                {
                    src:require("@/assets/images/image03.jpeg")
                }
            ],
            infoList:[
                {
                    title:"党建动态"
                },
                {
                    title:"热点聚集"
                },
                {
                    title:"专题学习"
                }
            ]
        }
    },
    methods:{

    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.qilin-homepage{
    width:100%;
    height:100%;
    >.qilin-homepage-header{
        height:300px;
        >.el-carousel{
            :deep(>.el-carousel__container){
                img{
                    width:100%;
                    height:100%;
                }
            }
        }
    }
    >.qilin-homepage-content{
        background-color:#fff;
        justify-content:space-between;
        >.qilin-homepage-content-box{
            width:32%;
            >.qilin-homepage-content-box-header{
                justify-content:flex-start;
                align-items:center;
                border-bottom:2px solid $background-color;
                >.el-icon{
                    font-size:$medium-text-size;
                    color:$background-color;
                }
                >span{
                    margin-left:6px;
                    font-size:$medium-text-size;
                    font-weight:bolder;
                }
            }
            >.qilin-homepage-content-box-list{
                >.qilin-homepage-content-box-list-item{
                    width:100%;
                    align-items:center;
                    &::before{
                        content:"";
                        width:$rem5;
                        height:$rem5;
                        border-radius:$radius-circle;
                        background-color:$background-color;
                        margin-right:$rem5;
                    }
                }
            }
        }
    }
}
</style>
